<script lang="ts" setup>
    import CanvasApplication from "@/components/SmartCanvasWidget/CanvasApplication";
    import {LoadingInstance} from "element-plus/es/components/loading/src/loading";
    import {Application} from "pixi.js";

    // canvas容器
    let $canvas: HTMLCanvasElement;

    // 应用
    let application: CanvasApplication;

    // loading
    let loading: LoadingInstance;

    // 参数
    const props = defineProps({
        // 缩放（一般保持默认值就好，因为系统会根据当前视口容器的尺寸自动计算，除非有特殊需求才更改）
        scale: {
            type: [Number, String],
            default: "auto"
        },
        // 背景色
        backgroundColor: {
            type: [String, Number],
            default: ""
        },
        // 画板宽
        width: {
            type: Number,
            default: 1024
        },
        // 画板高
        height: {
            type: Number,
            default: 1024
        },
        // 分辨率（一般保持默认值就好，因为系统会根据当前屏幕像素密度自动计算，除非有特殊需求才更改）
        resolution: {
            type: [Number, String],
            default: "auto"
        }
    });

    // 事件
    const emit = defineEmits<{
        (e: "onload", app: Application): void;
    }>();

    // 当前数据
    const dataBean = reactive<{
        scaleValue: number; // 缩放
    }>({
        // 缩放
        scaleValue: 0
    });

    // 组件挂载
    onMounted(() => {
        // 获取canvas容器
        $canvas = document.querySelector(".canvas-container") as HTMLCanvasElement;

        // 创建application对象
        application = new CanvasApplication($canvas, {width: props.width, height: props.height, scale: props.scale});

        // 初始化
        application
        .init({
            backgroundColor: props.backgroundColor,
            resolution: props.resolution,
            resize: (geometry: Record<string, any>) => {
                computedScaleValue(geometry.scale);
            }
        })
        .finally(() => {
            // 获取当前画板的几何信息
            const geometry = application.getDrawingBoardGeometry();

            // 输出当前缩放
            computedScaleValue(geometry.scale);

            // 初始化完成
            emit("onload", application.app);
        });
    });

    // 计算当前缩放值
    const computedScaleValue = (scale: number) => {
        // 设置当前缩放
        dataBean.scaleValue = Number(Math.round(scale * 100).toFixed(0)) / 100;
    };

    // 设置当前缩放
    const setScale = (value: number | string): void => {
        // 输出当前缩放
        const geometry = application.setDrawingBoardScale(value);

        // 设置当前缩放
        computedScaleValue(geometry.scale);
    };

    // 获取当前的缩放值
    const getScale = (): number => {
        return dataBean.scaleValue;
    };

    // 设置当前的尺寸
    const setSize = (width: number, height: number): void => {
        // 设置当前尺寸
        const geometry = application.setDrawingBoardSize(width, height);

        // 设置当前缩放
        computedScaleValue(geometry.scale);
    };

    // 添加图片资源
    const addImage = (alias: string, src: string): Promise<void> => {
        return application.addImage(alias, src);
    };

    // 获取当前app对象
    const getApplication = (): CanvasApplication => {
        return application;
    };

    // 获取当前画板的几何信息
    const getDrawingBoardGeometry = (): DrawingBoardGeometryInterface => {
        return application.getDrawingBoardGeometry();
    };

    // 显示loading
    const showLoading = (): void => {
        loading = ElLoading.service({
            lock: true,
            text: "加载中...",
            background: "rgba(0, 0, 0, 0.6)",
            target: $canvas
        });
    };

    // 隐藏loading
    const hideLoading = (): void => {
        if (loading)
        {
            loading.close();
        }
    };

    // 导出
    defineExpose({getScale, setScale, setSize, addImage, getApplication, showLoading, hideLoading, getDrawingBoardGeometry});
</script>

<template>
    <!-- canvas组件 -->
    <div class="smart-canvas-widget">
        <!-- 容器 -->
        <div class="canvas-container"></div>
        <!-- //容器 -->
    </div>
    <!-- //canvas组件 -->
</template>

<style lang="scss" scoped>
    // canvas组件
    .smart-canvas-widget
    {
        overflow: hidden;
        width: 100%;
        height: 100%;

        // 容器
        .canvas-container
        {
            width: 100%;
            height: 100%;
        }
    }
</style>